<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="../Master/adminMaster.xhtml">
            <ui:define name="page-content">

                <p:growl/>
                <div id="page-header">
                    <h1>Dashboard</h1>
                </div>

                <!-- Chart Example -->
                <div class="grid_9">
                    <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                        <div class="box-header" >
                            Complaints
                        </div>
                        <div id="dashtabs-pages" class="box-content no-padding">

                            <h:form id="form">  

                                <p:dataTable var="complaints" value="#{complaintsBean.complaintsWaits}" id="complaintss" 
                                             widgetVar="complaintTable" paginator="true" rows="10" paginatorPosition="bottom"
                                             emptyMessage="No complaints found with given criteria" 
                                             filteredValue="#{complaintsBean.filteredComplaints}" 
                                             selection="single" styleClass="table no-border"  scrollWidth="500" style="width: 100%" >  

                                    <f:facet name="header">  
                                        <p:outputPanel style="float: right;">
                                            <h:outputText value="Search all fields:" style="margin-right: 5px"/>&nbsp;
                                            <p:inputText id="globalFilter" onkeyup="complaintTable.filter()" style="width:200px;" />  
                                        </p:outputPanel>  
                                    </f:facet>  

                                    <p:column headerText="Title"  filterBy="#{complaints.complaintTitle}" id="Title" filterMatchMode="contains" >  
                                        #{complaints.complaintTitle}   
                                    </p:column>  


                                    <p:column headerText="Department" sortBy="#{complaints.departmentID.departmentName}" filterBy="#{complaints.departmentID.departmentName}" id="Department" filterMatchMode="contains">  
                                        #{complaints.departmentID.departmentName}
                                    </p:column>  

                                    <p:column headerText="Category" sortBy="#{complaints.categoryID.categoryName}" filterBy="#{complaints.categoryID.categoryName}" id="Category" filterMatchMode="contains">  
                                        #{complaints.categoryID.categoryName} 
                                    </p:column>  

                                    <p:column headerText="Create Date" sortBy="#{complaints.complaintCreateDate}" filterBy="#{complaints.complaintCreateDate}" id="createDate" filterMatchMode="contains">  
                                        <h:outputText value="#{complaints.complaintCreateDate}" >
                                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                        </h:outputText>
                                    </p:column>  

                                    <p:column headerText="Status" sortBy="#{complaints.complaintStatus}"  width="40">  
                                        <h:panelGroup rendered="#{complaints.complaintStatus==0}"><span style="color: red;font-weight: bold">Wait</span></h:panelGroup>
                                        <h:panelGroup rendered="#{complaints.complaintStatus==1}"><span style="color: green;font-weight: bold">Done</span></h:panelGroup>
                                    </p:column> 
                                    <p:column headerText="Priority" sortBy="#{complaints.complaintPriority}"  width="40">  
                                        #{complaints.complaintPriority}
                                    </p:column>
                                    <p:column headerText="Options">  
                                        <p:commandLink oncomplete="dlgView.show()" update=":form:view" title="View">
                                            <p:graphicImage value="../CSS/images/information.png"></p:graphicImage>
                                            <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                        </p:commandLink>
                                        <p:commandLink oncomplete="dlgResponse.show()" update=":form:display" title="Response">
                                            <p:graphicImage value="../CSS/images/pencil.png"></p:graphicImage>
                                            <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                        </p:commandLink>
                                        <h:commandLink  action="#{solutionBean.direction(complaints)}" title="Solution" >
                                            <p:graphicImage value="../CSS/images/comment_32.png"></p:graphicImage>
                                        </h:commandLink>
                                        <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                                            <p:commandLink  oncomplete="dlgAss.show()" title="Assign Task" update=":form:display1">
                                                <p:graphicImage value="../CSS/images/hammer_screwdriver.png"></p:graphicImage>                                        <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                            </p:commandLink>
                                        </h:panelGroup>
                                        <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                                            <h:commandLink  title="Delete" action="#{complaintsBean.deleteComplaint(complaints)}" onclick="javascript: return confirm('Are you sure remove complaints ?')">
                                                <p:graphicImage value="../CSS/images/cross_circle.png"></p:graphicImage>
                                            </h:commandLink>
                                        </h:panelGroup>
                                    </p:column>
                                </p:dataTable>  

                                <p:dialog id="dialog" header="Solution" widgetVar="dlgResponse" >  

                                    <p:ajax event="close" listener="#{complaintsBean.closeDialog()}"/> 
                                    <p:panel id="display" style="border: none"> 
                                        <p:panel id="report" style="border: none" > 
                                            <h:panelGroup rendered="#{!complaintsBean.alert.equals('aa')}">
                                                <div class="notification success png_bg">

                                                    <div>
                                                        #{complaintsBean.alert}
                                                    </div>
                                                </div>
                                            </h:panelGroup>
                                        </p:panel>
                                        <p:row >
                                            <p:column>
                                                <h:outputLabel value="Complaint title: " style="float: left;padding-right: 10px;font-weight: bold;"/>
                                                <h:outputLabel value="#{complaintsBean.complaintSelected.complaintTitle}" style="font-weight: normal" />   
                                            </p:column><br/><br/>
                                        </p:row>
                                        <p:row>
                                            <p:column><h:outputLabel value="Solution: " style="vertical-align: top;font-weight: bold;"/></p:column>   
                                            <p:column><p:editor id="editor"  value="#{complaintsBean.solution}" width="600"/></p:column> 
                                        </p:row>
                                        <p:row> 
                                            <p:column></p:column>
                                            <p:column><p:commandButton  value="Submit Solution" update="report,complaintss" actionListener="#{complaintsBean.createSolution()}"/> </p:column> 
                                        </p:row> 
                                    </p:panel>  

                                </p:dialog>
                                <p:dialog id="dialogAss" header="Assign Task" widgetVar="dlgAss" >  

                                    <p:ajax event="close" listener="#{complaintsBean.closeDialog()}"/> 

                                    <p:panel id="display1" style="border: none"> 
                                        <p:panel id="reportAss" style="border: none" > 
                                            <h:panelGroup rendered="#{!complaintsBean.alert.equals('aa')}">
                                                <div class="notification success png_bg">

                                                    <div>
                                                        #{complaintsBean.alert}
                                                    </div>
                                                </div>
                                            </h:panelGroup>
                                        </p:panel>
                                        <p:row >
                                            <p:column>
                                                <h:outputLabel value="Technical: " style="float: left;padding-right: 10px;font-weight: bold;"/>
                                                <h:selectOneMenu value="#{complaintsBean.technicalsSelected}">

                                                    <f:selectItems value="#{complaintsBean.technicals}"></f:selectItems>
                                                </h:selectOneMenu>  
                                            </p:column><br/><br/>
                                        </p:row>

                                        <p:row> 
                                            <p:column></p:column>
                                            <p:column style="padding-left: 50px"><p:commandButton  value="Assign Task" update="reportAss,complaintss" actionListener="#{complaintsBean.updateTechnical()}"/> </p:column> 
                                        </p:row> 
                                    </p:panel>  

                                </p:dialog>
                                <p:dialog id="dialogView" header="Complaint" widgetVar="dlgView" >  

                                    <p:panel id="view" style="border: none" > 
                                        <div class="wrapDialog">
                                            <label style="font-weight: bold;"> Complaint title: </label>
                                            <h:outputText value="#{complaintsBean.complaintSelected.complaintTitle}" escape="false" />  
                                        </div>
                                        <div class="cleaner"></div>
                                        <br></br>
                                        <div class="wrapDialog">
                                            <label style="font-weight: bold;"> Creator: </label>
                                            <h:outputText value="#{complaintsBean.complaintSelected.membersID.membersName}" escape="false" />  
                                        </div>
                                        <div class="cleaner"></div> <br></br>
                                        <div class="wrapDialog">
                                            <label style="font-weight: bold;margin-bottom:8px ">Complaint Content: </label>
                                            <p:scrollPanel style="width:600px;height: 400px;border: 0px solid #ccc;">  
                                                <h:outputText value="#{complaintsBean.complaintSelected.complaintContent}" escape="false"  /> 
                                            </p:scrollPanel>
                                        </div>

                                    </p:panel>  

                                </p:dialog>

                            </h:form>  

                        </div>
                    </h:panelGroup>
                    <h:panelGroup rendered="#{login.customer.membersRole == 1}">
                        <div class="box-header" style="width:850px">
                            Complaints
                        </div>
                        <div class="box" style="width:840px">
                            <div id="chart_div" style="width:840px">

                                <h:form id="form1">  

                                    <p:dataTable var="complaints" value="#{complaintsBean.complaintsMembersWaits}" id="complaintsss" 
                                                 widgetVar="complaintTable" paginator="true" rows="10" paginatorPosition="bottom"
                                                 emptyMessage="No complaints found with given criteria" 
                                                 filteredValue="#{complaintsBean.filteredComplaints}" 
                                                 selection="single" styleClass="table no-border"  scrollWidth="500" style="width: 100%" >  

                                        <f:facet name="header">  
                                            <p:outputPanel style="float: right;">
                                                <h:outputText value="Search all fields:" style="margin-right: 5px"/>&nbsp;
                                                <p:inputText id="globalFilter" onkeyup="complaintTable.filter()" style="width:200px;" />  
                                            </p:outputPanel>  
                                        </f:facet>  

                                        <p:column headerText="Title"  filterBy="#{complaints.complaintTitle}" id="Title" filterMatchMode="contains" >  
                                            #{complaints.complaintTitle}   
                                        </p:column>  


                                        <p:column headerText="Department" sortBy="#{complaints.departmentID.departmentName}" filterBy="#{complaints.departmentID.departmentName}" id="Department" filterMatchMode="contains">  
                                            #{complaints.departmentID.departmentName}
                                        </p:column>  

                                        <p:column headerText="Category" sortBy="#{complaints.categoryID.categoryName}" filterBy="#{complaints.categoryID.categoryName}" id="Category" filterMatchMode="contains">  
                                            #{complaints.categoryID.categoryName} 
                                        </p:column>  

                                        <p:column headerText="Create Date" sortBy="#{complaints.complaintCreateDate}" filterBy="#{complaints.complaintCreateDate}" id="createDate" filterMatchMode="contains">  
                                            <h:outputText value="#{complaints.complaintCreateDate}" >
                                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                            </h:outputText>
                                        </p:column>  

                                        <p:column headerText="Status" sortBy="#{complaints.complaintStatus}"  width="40">  
                                            <h:panelGroup rendered="#{complaints.complaintStatus==0}"><span style="color: red;font-weight: bold">Wait</span></h:panelGroup>
                                            <h:panelGroup rendered="#{complaints.complaintStatus==1}"><span style="color: green;font-weight: bold">Done</span></h:panelGroup>
                                        </p:column> 
                                        <p:column headerText="Priority" sortBy="#{complaints.complaintPriority}"  width="40">  
                                            #{complaints.complaintPriority}
                                        </p:column>
                                        <p:column headerText="Options">  
                                            <p:commandLink oncomplete="dlgView.show()" update=":form1:view1" title="View">
                                                <p:graphicImage value="../CSS/images/information.png"></p:graphicImage>
                                                <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                            </p:commandLink>
                                            <p:commandLink oncomplete="dlgResponse.show()" update=":form1:display1" title="Response">
                                                <p:graphicImage value="../CSS/images/pencil.png"></p:graphicImage>
                                                <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                            </p:commandLink>
                                            <h:commandLink  action="#{solutionBean.direction(complaints)}" title="Solution" >
                                                <p:graphicImage value="../CSS/images/comment_32.png"></p:graphicImage>
                                            </h:commandLink>
                                            <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                                                <p:commandLink  oncomplete="dlgAss.show()" title="Assign Task" update=":form:display11">
                                                    <p:graphicImage value="../CSS/images/hammer_screwdriver.png"></p:graphicImage>                                        <f:setPropertyActionListener value="#{complaints}" target="#{complaintsBean.complaintSelected}" />  
                                                </p:commandLink>
                                            </h:panelGroup>
                                            <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                                                <h:commandLink  title="Delete" action="#{complaintsBean.deleteComplaint(complaints)}" onclick="javascript: return confirm('Are you sure remove complaints ?')">
                                                    <p:graphicImage value="../CSS/images/cross_circle.png"></p:graphicImage>
                                                </h:commandLink>
                                            </h:panelGroup>
                                        </p:column>
                                    </p:dataTable>  

                                    <p:dialog id="dialog1" header="Solution" widgetVar="dlgResponse" >  

                                        <p:ajax event="close" listener="#{complaintsBean.closeDialog()}"/> 
                                        <p:panel id="display1" style="border: none"> 
                                            <p:panel id="report1" style="border: none" > 
                                                <h:panelGroup rendered="#{!complaintsBean.alert.equals('aa')}">
                                                    <div class="notification success png_bg">

                                                        <div>
                                                            #{complaintsBean.alert}
                                                        </div>
                                                    </div>
                                                </h:panelGroup>
                                            </p:panel>
                                            <p:row >
                                                <p:column>
                                                    <h:outputLabel value="Complaint title: " style="float: left;padding-right: 10px;font-weight: bold;"/>
                                                    <h:outputLabel value="#{complaintsBean.complaintSelected.complaintTitle}" style="font-weight: normal" />   
                                                </p:column><br/><br/>
                                            </p:row>
                                            <p:row>
                                                <p:column><h:outputLabel value="Solution: " style="vertical-align: top;font-weight: bold;"/></p:column>   
                                                <p:column><p:editor id="editor"  value="#{complaintsBean.solution}" width="600"/></p:column> 
                                            </p:row>
                                            <p:row> 
                                                <p:column></p:column>
                                                <p:column><p:commandButton  value="Submit Solution" update="report1,complaintsss" actionListener="#{complaintsBean.createSolution()}"/> </p:column> 
                                            </p:row> 
                                        </p:panel>  

                                    </p:dialog>
                                    <p:dialog id="dialogAss" header="Assign Task" widgetVar="dlgAss" >  

                                        <p:ajax event="close" listener="#{complaintsBean.closeDialog()}"/> 

                                        <p:panel id="display11" style="border: none"> 
                                            <p:panel id="reportAss1" style="border: none" > 
                                                <h:panelGroup rendered="#{!complaintsBean.alert.equals('aa')}">
                                                    <div class="notification success png_bg">

                                                        <div>
                                                            #{complaintsBean.alert}
                                                        </div>
                                                    </div>
                                                </h:panelGroup>
                                            </p:panel>
                                            <p:row >
                                                <p:column>
                                                    <h:outputLabel value="Technical: " style="float: left;padding-right: 10px;font-weight: bold;"/>
                                                    <h:selectOneMenu value="#{complaintsBean.technicalsSelected}">

                                                        <f:selectItems value="#{complaintsBean.technicals}"></f:selectItems>
                                                    </h:selectOneMenu>  
                                                </p:column><br/><br/>
                                            </p:row>

                                            <p:row> 
                                                <p:column></p:column>
                                                <p:column style="padding-left: 50px"><p:commandButton  value="Assign Task" update="reportAss1,complaintsss" actionListener="#{complaintsBean.updateTechnical()}"/> </p:column> 
                                            </p:row> 
                                        </p:panel>  

                                    </p:dialog>
                                    <p:dialog id="dialogView1" header="Complaint" widgetVar="dlgView" >  

                                        <p:panel id="view1" style="border: none" > 
                                            <div class="wrapDialog">
                                                <label style="font-weight: bold;"> Complaint title: </label>
                                                <h:outputText value="#{complaintsBean.complaintSelected.complaintTitle}" escape="false" />  
                                            </div>
                                            <div class="cleaner"></div>
                                            <br></br>
                                            <div class="wrapDialog">
                                                <label style="font-weight: bold;"> Creator: </label>
                                                <h:outputText value="#{complaintsBean.complaintSelected.membersID.membersName}" escape="false" />  
                                            </div>
                                            <div class="cleaner"></div> <br></br>
                                            <div class="wrapDialog">
                                                <label style="font-weight: bold;margin-bottom:8px ">Complaint Content: </label>
                                                <p:scrollPanel style="width:600px;height: 400px;border: 0px solid #ccc;">  
                                                    <h:outputText value="#{complaintsBean.complaintSelected.complaintContent}" escape="false"  /> 
                                                </p:scrollPanel>
                                            </div>

                                        </p:panel>  

                                    </p:dialog>

                                </h:form>  
                            </div>

                        </div>
                    </h:panelGroup>
                </div>
                <p:outputPanel layout="block" styleClass="grid_3" style="display: inline-block;">
                    <p:panel id="gpnlComplaint1" header="Messages" style="width:250px;display: inline-block;margin: 1% 1%;" toggleable="true"
                             rendered="#{admin.numUnprocessComplaint != 0}">
                        <p>You have <a href="complaints.xhtml" style="color: #FF5E99;"><strong>#{admin.numUnprocessComplaint}</strong></a> unprocess complaints</p>
                    </p:panel>
                    <p:panel id="gpnlComplaint" header="Complaints" style="width:250px;display: inline-block;margin: 1% 1%;" toggleable="true">
                        <p><b>Today:</b>&nbsp;<span style="color: #FF5E99">#{admin.todayComplaints}</span> new complaint</p>
                        <p><b>Lasted:</b>&nbsp;<span style="color: #FF5E99">#{admin.lastedComplaints}</span> complaints</p>
                        <p><b>Solved:</b>&nbsp;<span style="color: #FF5E99">#{admin.solvedComplaints}</span> complaints</p>
                        <p><b>Waitting:</b>&nbsp;<span style="color: #FF5E99">#{admin.pendingComplaints}</span> complaints</p>
                    </p:panel>  
                </p:outputPanel>  
                <p:draggable for="gpnlComplaint" containment="parent" axis="y" opacity="0.3" />

            </ui:define>
        </ui:composition>
    </h:body>
</html>

